<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" style="font-size: 55.2px;">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="format-detection" content="telephone=no, mobile=no">
    <meta name="apple-mobile-web-app-title">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Pragma" content="no-cache">
    <title>手机充值</title>
    <script type="text/javascript">
        !function (e, t) {
            var a = e.documentElement,
                n = "orientationchange" in window ? "orientationchange" : "resize",
                i = function () {
                    var e = a.clientWidth;
                    e && (a.style.fontSize = 750 <= e ? "100px" : e / 750 * 100 + "px")
                };
            i(),
            e.addEventListener && (t.addEventListener(n, i, !1), e.addEventListener("DOMContentLoaded", i, !1))
        }(document, window);
    </script>
    <link rel="stylesheet" type="text/css" href="index/index.css">
    <script src="index/rem.js"></script>
    <link rel="stylesheet" href="index/zzcfl.css">
    <link rel="stylesheet" href="index/tqcz.index.css">
    <link rel="stylesheet" href="index/layer.css">
    <style>
        .container {
            position: relative;
            width: 100vw;
            min-height: 100vh;
        }

        .bindMobileModal {
            position: absolute;
            left: 0;
            top: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, .8);
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 3;
            -webkit-transform: translateZ(0);
        }

        .bindMobileModal .content {
            width: 6.2rem;
            background: #fff;
            border-radius: .2rem;
            border: 3px solid #e02e24;
            min-height: 1rem;
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .bindMobileModal .content h3 {
            font-size: .34rem;
            line-height: .8rem;
            color: #000;
            font-weight: bold;
            margin: .1rem 0 0;
        }

        .bindMobileModal .content .text {
            font-size: .36rem;
            color: #333;
            margin-bottom: .3rem;
        }

        .bindMobileModal .content .input {
            width: 5.8rem;
            height: .9rem;
            border: 1px solid #cccccc;
            border-radius: .12rem;
            margin: 0 0 .3rem;
            display: -webkit-flex;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding: 0 .15rem;
            overflow: hidden;
            position: relative;
        }

        .bindMobileModal .content .input img {
            width: .5rem;
        }

        .bindMobileModal .content .input input {
            border: none;
            outline: none;
            height: 100%;
            box-sizing: border-box;
            padding: 0 .2rem;
            font-size: .3rem;
            flex: 1;
        }

        .bindMobileModal .content .codeInput {
            width: 3.3rem;
        }

        .bindMobileModal .content .input .getCode {
            /*width: 2rem;*/
            font-size: .3rem;
            color: #f0cf82;
            text-decoration: underline;
        }

        .bindMobileModal .content .input .getCode.disabled {
            -webkit-filter: grayscale(1);
            filter: grayscale(1);
            text-decoration: none;
        }

        .bindMobileModal .content .submit {
            border: none;
            width: 5.8rem;
            height: .8rem;
            background: linear-gradient(to bottom, #f3d682, #ebc683);
            border-radius: .12rem;
            text-align: center;
            font-size: .3rem;
            color: #fff;
            line-height: .8rem;
        }

        .bindMobileModal .content .tips {
            font-size: .24rem;
            color: #e02e24;
            line-height: .5rem;
            margin-bottom: .25rem;
        }

        .bindMobileModal .close {
            width: .6rem;
            height: .6rem;
            margin-top: .3rem;
        }

        .userBar {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            left: 0;
            line-height: .7rem;
            color: #333;
            width: 100vw;
            background: #ffd1c4;
            font-size: .26rem;
            text-align: center;
            z-index: 1;
        }

        .payStatusConfirmModal {
            z-index: 999;
            position: fixed;
            top: 0;
            display: -webkit-flex;
            display: flex;
            width: 100vw;
            height: 100vh;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: rgba(0, 0, 0, .8);
        }

        .payStatusConfirmModal .content {
            width: 76vw;
            background-color: #fff;
            border-radius: 8px;
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-sizing: border-box;
            padding: 15px;
        }

        .payStatusConfirmModal .content .title {
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }

        .payStatusConfirmModal .content .url {
            background-color: #f5f5f5;
            font-size: 12px;
            width: 60vw;
            padding: 5px 15px;
            box-sizing: border-box;
            line-height: 20px;
            color: #888;
            border-radius: 6px;
            margin: 15px 0;
            white-space: normal;
            word-break: break-all;
            word-wrap: break-word;
        }

        .payStatusConfirmModal .content .btn {
            width: 30vw;
            height: 40px;
            line-height: 40px;
            color: #fff;
            text-align: center;
            font-size: 16px;
            border-radius: 20px;
            background-color: #dfc579;
        }

        .payStatusConfirmModal .close {
            width: 30px;
            margin-top: 10px;
        }

        .payStatusConfirmModal .content .twoBtn {
            width: 100%;
            display: -webkit-flex;
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-top: 20px;
        }

        .payStatusConfirmModal .content .twoBtn div {
            width: 30vw;
            height: 40px;
            line-height: 40px;
            color: #fff;
            text-align: center;
            font-size: 16px;
            border-radius: 20px;
            background-color: #e6d18e;
        }

        .payStatusConfirmModal .content .twoBtn .left {
            border: 1px solid #dedede;
            background-color: #f1f1f1;
            color: #333;
        }

        .ovfHiden {
            overflow: hidden;
            height: 100%;
        }

        .searchMobileOrderModal {
            position: absolute;
            left: 0;
            top: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(0, 0, 0, .8);
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 3;
            -webkit-transform: translateZ(0);
        }

        .searchMobileOrderModal .content {
            width: 6.2rem;
            background: #fff;
            border-radius: .2rem;
            border: 3px solid #e02e24;
            min-height: 1rem;
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .searchMobileOrderModal .content h3 {
            font-size: .34rem;
            line-height: .8rem;
            color: #000;
            font-weight: bold;
            margin: .1rem 0 0;
        }

        .searchMobileOrderModal .content .text {
            font-size: .36rem;
            color: #333;
            margin-bottom: .3rem;
        }

        .searchMobileOrderModal .content .input {
            width: 5.8rem;
            height: .9rem;
            border: 1px solid #cccccc;
            border-radius: .12rem;
            margin: 0 0 .3rem;
            display: -webkit-flex;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding: 0 .15rem;
            overflow: hidden;
            position: relative;
        }

        .searchMobileOrderModal .content .input img {
            width: .5rem;
        }

        .searchMobileOrderModal .content .input input {
            border: none;
            outline: none;
            height: 100%;
            box-sizing: border-box;
            padding: 0 .2rem;
            font-size: .3rem;
            flex: 1;
        }

        .searchMobileOrderModal .content .codeInput {
            width: 3.3rem;
        }

        .searchMobileOrderModal .content .input .getCode {
            /*width: 2rem;*/
            font-size: .3rem;
            color: #f0cf82;
            text-decoration: underline;
        }

        .searchMobileOrderModal .content .input .getCode.disabled {
            -webkit-filter: grayscale(1);
            filter: grayscale(1);
            text-decoration: none;
        }

        .searchMobileOrderModal .content .submit {
            border: none;
            width: 5.8rem;
            height: .8rem;
            background: linear-gradient(to bottom, #f3d682, #ebc683);
            border-radius: .12rem;
            text-align: center;
            font-size: .3rem;
            color: #fff;
            line-height: .8rem;
            margin-bottom: .25rem;
        }

        .searchMobileOrderModal .close {
            width: .6rem;
            height: .6rem;
            margin-top: .3rem;
        }

        .refreshOrder {
            font-size: .24rem;
            color: #333;
            text-align: center;
            padding: .3rem 0;
            display: -webkit-flex;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .refreshOrder div {
            text-decoration: underline;
        }

        .refreshOrder .line {
            width: 1px;
            height: .3rem;
            margin: 0 .1rem;
            background: #333;
            text-decoration: none;
        }

        .area {
            font-size: .24rem;
            color: #333;
            padding-left: .07rem;
            width: 100%;
            text-align: left;
            margin-top: -.3rem;
        }
    </style>
    <link href="index/layer.css" type="text/css" rel="styleSheet" id="layermcss">
</head>
<body style="">
<main id="app" class="container">
    <div class="cz-page">
        <div class="title"><img src="index/4227741120x210_ORIGIN_wQDN.png" class="title-logo"></div>
        <div class="content">
            <label >
                <div class="title">
                    充值号码 <span style="color: rgb(223, 197, 121);">(支持三网)</span></div>
                <div class="input">
                    <input ref="input" type="tel" maxlength="11" v-model="inputNumber" placeholder="请输入手机号码" @focus="showCloseBtn" @blur="hideCloseBtn" />
                    <i class="input-close" v-show="showInputClose" @click="clearInput"></i></div>
                <div class="area">{{areaText}} </div>
            </label>
            <div class="line"></div>
        </div>
        <div class="content">
            <div class="title">
                充值金额
            </div>
            <div class="list">
                <ul>
                    <li :class="{'active': currentPayItem.proId === item.proId}" v-for="(item, index) in chooseList" @click="chooseItem(item)"
                        :style="item.isClose ? 'color: #3333;' : ''">
                        <div class="fs1">{{item.price}}元</div>
                        <div class="fs3" v-if="!item.isClose">折扣价 ¥{{item.discountAmount}}</div>
                        <div class="fs3" v-if="!item.isClose">{{item.operator}}</div>
                        <div class="fs3" v-else>通道维护中</div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="content">
            <div class="tips-content">
                <div class="tips"></div>
                <ul>
                    <li>①本业务为话费慢充专享优惠，<span style="font-weight: bold;">充值支付后一般24小时到账，最晚72小时内到账</span>，请留意【充值成功通知】短信或微信推送消息
                    </li>
                    <li>②月初充值高峰期，<span
                            style="font-weight: bold;">100元及以上面额【可能】会分批到账（例如充值100元，可能会分为30+50+20三笔到账）</span>，请提前了解并周知
                    </li>
                    <li>③携号转网、副卡暂不支持充值，如不慎购买请在30分钟内自助退款。</li>
                    <li>④因本业务为第三方代充值服务，故无法提供充值发票，有开票需求的请勿充值。</li>
                    <li>⑤本业务由快快收信息科技有限公司提供技术支持，如有疑问请查阅《<span style="text-decoration: underline;">用户协议</span>》及《<span
                            style="text-decoration: underline;">隐私政策</span>》，或点击页面“联系客服”按钮进行咨询。

                    </li>
                </ul>
            </div>
            <div id="alipayId" > </div>
        </div>
        <div class="btn-area">
            <a href="javascript:;" class="btn-area-service border-right"
                                 style="color: rgb(74, 144, 226);"><img
                src=""
                alt="" class="service-image"> <span class="service-text">客服</span></a> <span  @click="toOrderList"
                class="btn-area-order border-right" style="color: rgb(74, 144, 226);"><img
                src=""
                alt="" class="order-image"> <span class="service-text"
                                                 >查询订单</span></span>
            <button class="submit-btn" @click="showConfirmPayModal(currentPayItem)">立即充值</button>
        </div>

    </div> <!---->
    <div class="bindMobileModal" style="display: none;">
        <div class="content"><h3>登录后, 可查看历史订单</h3>
            <div class="text"></div>
            <div class="input"><img src="index/405730phone_ORIGIN_3ITN.png"> <input type="number" placeholder="请输入手机号">
            </div>
            <div class="input"><img src="index/202072317315423_ORIGIN_xcDN.jpg"> <input placeholder="请输入验证码"
                                                                                        class="codeInput">
                <div class="getCode" style="width: 2rem;">获取验证码</div>
            </div>
            <button class="submit">立即登录</button>
            <div class="tips">*登陆即代表您已同意《充值须知》</div>
        </div>
        <img src="index/3835652close_ORIGIN_5kDN.png" class="close"></div>
    <div class="couponModal" style="display: none;">
        <div class="content">
            <div class="header">充值福利</div>
            <div class="item">
                <div class="value"><span>￥</span>
                    6
                </div>
                <div class="info">
                    <div class="left">
                        <div class="title">慢充话费券</div>
                        <div class="viceTitle">充值100元可用</div>
                    </div>
                    <div class="right">已领取</div>
                </div>
            </div>
            <div class="item">
                <div class="value"><span>￥</span>
                    3
                </div>
                <div class="info">
                    <div class="left">
                        <div class="title">慢充话费券</div>
                        <div class="viceTitle">充值50元可用</div>
                    </div>
                    <div class="right">已领取</div>
                </div>
            </div>
            <div class="btn">立即查看</div>
        </div>
        <img src="index/5728567close3_ORIGIN_wUDM.png" alt="" class="close" @click="showCouponModalMark=false"></div> <!----> <!----> <!---->


    <div class="tipsModal" v-if="showTipsModalMark">
        <div class="backCover"></div>
        <div class="content" style="width: 6.5rem;border-radius: .16rem;">
            <div class="title" style="font-size: .32rem;padding: .4rem 0 .2rem 0;">温馨提示</div>
            <div class="text" style="text-align:left;font-size: .24rem;">
                <p>① 请确认充值号码: {{inputNumber}}</p>
                <p>② 充值一般24小时到账，高峰期最长72小时到账</p>
                <p>③ 携号转网、副卡暂不支持，充错号码无法退款，请仔细检查</span></p>
                <p>④ 100元以上面额会分批到账，例如120元会拆分为4笔30元到账</p>
            </div>
            <div style="padding: 0 .4rem .3rem;display: -webkit-flex;display: flex;justify-content: space-between;">
                <a href="javascript:void(0);" class="notRemindBtn" @click="notRemindTip"><div class="know-btn1" style="width: 2.5rem;height: .9rem;line-height: .9rem;border: 1px solid #dcdcde;border-radius: .45rem;color: #333;font-weight: bold;margin: 0;box-sizing: border-box;">取消</div></a>
                <a href="javascript:void(0);" class="toNextBtn" @click="toTipNext"><div class="know-btn" style="width: 2.5rem;height: .9rem;line-height: .9rem;border-radius: .45rem;font-weight: bold;background-color: #e6d18e;margin: 0;">确定</div></a>
            </div>
        </div>
    </div>


    <div class="tipsModal" v-if="showCallFeeMaintenanceModalMark">
        <div class="backCover"></div>
        <div class="content">
            <div class="title" style="padding-bottom: .2rem;">温馨提示</div>
            <div class="text" style="text-align:left;">
                <p>慢充维护中, 暂不支持充值, 敬请谅解</p>
                <p>维护时间: {{callFeeMaintenanceInfo.startTime | formatDate1}} 至 {{callFeeMaintenanceInfo.endTime | formatDate1}}</p>
            </div>
            <a href="javascript:void(0);" class="toNextBtn" @click="showCallFeeMaintenanceModalMark=false"><div class="know-btn" style="margin-bottom: .3rem;background-color: #e6d18e;">我知道了</div></a>
        </div>
    </div>

    <div class="tipsModal" v-if="showQuickTipsModalMark">">
        <div class="backCover"></div>
        <div class="content">
            <div class="title">温馨提示</div>
            <div class="text" style="text-align:left;">
                <p><span style="color: #f5567c;">①</span> 充值预计2小时内到账，高峰期存在延迟</p>
                <p><span style="color: #f5567c;">② 携号转网、副卡无法到账，一旦充值无法退款，敬请周知</span></p>
                <p><span style="color: #f5567c;">③</span> 充错号码无法退款，请仔细确认号码</p>
            </div>
            <a href="javascript:void(0);" class="toNextBtn" @click="toQuickTipNext"><div class="know-btn">继续充值</div></a>
            <a href="javascript:void(0);" class="notRemindBtn" @click="notQuickRemindTip"><div class="know-btn1">不再提醒</div></a>
        </div>
    </div>

    <div class="mint-indicator" v-show="showLoading">
        <div class="mint-indicator-wrapper" style="padding: 0.2rem;">
            <div class="mint-indicator-spin">
                <div class="v-spinner-snake"></div>
            </div>
            <span class="mint-indicator-text">加载中...</span></div>
        <div class="mint-indicator-mask"></div>
    </div>
    <div class="payStatusConfirmModal" v-show="showConfirmGotModalMark">
        <div class="content">
            <div class="title">
                您是否已支付成功？
            </div>
            <div class="twoBtn">
                <div class="left" @click="showConfirmGotModalMark=false">未支付</div>
                <div class="right" @click="autoQueryOrderStatus">支付成功</div>
            </div>
        </div>
        <img src="index/730719close_ORIGIN_wYDO.png" class="close"></div>
    <div class="searchMobileOrderModal"  v-show="showSearchMobileOrderModalMark">
        <div class="content"><h3>通过手机号查询订单</h3>
            <div class="text"></div>
            <div class="input"><img src="index/405730phone_ORIGIN_3ITN.png"> <input type="number" placeholder="请输入手机号">
            </div>
            <div class="input"><img src="index/202072317315423_ORIGIN_xcDN.jpg"> <input placeholder="请输入验证码"
                                                                                        class="codeInput">
                <div class="getCode" style="width: 2rem;">获取验证码</div>
            </div>
            <button class="submit">立即查询</button>
        </div>
        <img src="index/3835652close_ORIGIN_5kDN.png" class="close"/>
    </div>




</main>
<script type="text/javascript" src="index/vue.min.js"></script>
<script type="text/javascript" src="index/axios.min.js"></script>
<script type="text/javascript" src="index/commonCheck.js"></script>
<script type="text/javascript" src="index/layer.js"></script>
<script type="text/javascript" src="index/js-cookie.js"></script>
<script type="text/javascript" src="index/jquery.min-1.10.2.js"></script>
<script type="text/javascript">
    var timer;
    var vue = new Vue({
        el: "#app",
        data: {
            showInputClose: false,
            navPriceTag: '',
            quickNavPriceTag: '',
            inputNumber: "",
            showLoading: false,
            loadingText: '加载中',
            mobile: '',
            chooseList: [],
            quickChooseList: [],
            currentNavIndex: 0,
            areaText: '',
            showPayConfirmModalMark: false,
            currentPayItem: '',
            orderList: [],
            currentBatchNo: '',
            agreeChargeMark: false,
            channel: '',
            orderId: '',
            showBindMobileModalMark: false,
            remainSeconds: 60,
            codeContent: "获取验证码",
            isWaitingForCode: false,
            phoneNum: '',
            phoneCode: '',
            usertoken: '',

            normalCoupon: [],
            firstCoupon: '',
            showCouponModalMark: false,
            showTipsModalMark: false,
            showQuickTipsModalMark: false,
            currentUserNumber: '',
            hintPhoneList: [],
            filterHintPhoneList: [],
            currentHintPhone: '',
            currentHintText: '',
            showInputHintMark: false,
            canFocusToClearInput: false,
            isNeedQueryLoading: false,
            showConfirmGotModalMark: false,
            domain: '',
            showSearchMobileOrderModalMark: false,
            extraRule: '',
            hideQuickTab: false,
            extraText: '',
            alipayPayHtml:''
        },
        mixins: [checkMixin],
        filters: {
            encodeNum: function (v) {
                return v.substr(0, 3) + '****' + v.substr(7);
            }
        },
        mounted: function () {
            var self = this;

            var reloadUrl = self.getQueryString('reloadUrl')
            if (reloadUrl) {
                location.replace(reloadUrl)
                return;
            }

            self.channel = self.getQueryString('channel');
            self.hideQuickTab = self.getQueryString('hideQuickTab') == 1;

            self.getProductList();
            self.getQuickChooseList();

            var localUid = Cookies.get('callFeeH5Uid') || localStorage.getItem("callFeeH5Uid");
            if (localUid) {
                self.usertoken = localUid;
            } else {
                // self.showBindMobileModalMark = true;
                self.getToken();
            }

            var localNumber = Cookies.get('callFeeH5Number');
            if (localNumber) {
                self.currentUserNumber = localNumber;
            }

            var autoFill = self.getQueryString('mobile')
            if (autoFill) {
                if (self.isPhoneNo(autoFill)) {
                    self.inputNumber = autoFill;
                }
            }

            if (self.getQueryString('needCouponModal') === '1') {
                var date = new Date();
                var dayMark = date.getMonth() + "" + date.getDate();
                var localMark = Cookies.get('callFeeChargeCouponForH5');
                if (!localMark || localMark != dayMark) {
                    Cookies.set('callFeeChargeCouponForH5', dayMark);
                    self.showCouponModalMark = true;
                }
            }
            self.initHintPhone();

            var paramId = self.getQueryString('orderId');
            var paramBatchNo = self.getQueryString('batchNo');
            var id = Cookies.get('callFeeForH5LocalOrderId');
            if (paramId && paramBatchNo && (!id || id.indexOf(paramId) === -1)) {
                self.orderId = paramId;
                self.currentBatchNo = paramBatchNo;
                self.isNeedQueryLoading = true;
                self.autoQueryOrderStatus();
            }
            self.domain = window.location.protocol + "//" + window.location.host;

            self.initChannelInfo();
            console.log(location.href)
        },
        watch: {
            inputNumber: function (val) {
                var self = this;
                if (val.length === 11) {
                    setTimeout(function () {
                        self.$refs.input.blur();
                        self.checkMobileLoc();
                    }, 400);
                } else {
                    self.areaText = '';
                    self.currentHintText = '';
                }

                self.filterHintPhoneList = self.hintPhoneList.filter(function (item) {
                    var l = val.length;
                    return (item.number.substr(0, l) === val && val.length < 11);
                })
            },
            showBindMobileModalMark: function (newV) {
                if (newV) {
                    $('html,body').addClass('ovfHiden'); //使网页不可滚动
                } else {
                    $('html,body').removeClass('ovfHiden'); //使网页恢复可滚动 
                }
            }
        },
        methods: {
            initSpecialChannel: function () {

            },
            toOrderList: function () {
                var self = this;
                location.href = './orderList.html?channel=' + self.channel + '&token=' + self.usertoken + '&userId=' + self.getQueryString('userId');
            },
            showCloseBtn: function () {
                this.showInputClose = true;
            },
            hideCloseBtn: function () {
                this.showInputClose = false;
            },
            toUserTip: function (type) {
                var self = this,
                    url = '';
                if (type === 0) {
                    url = self.domain + 'index/user_agreement.html'
                } else if (type === 1) {
                    url = self.domain + 'index/privacy_policy.html'
                }
                location.href = url
            },
            checkQuickPay: function () {
                var self = this;
                var date = new Date();
                var dayMark = date.getMonth() + "" + date.getDate();
                var localMark = Cookies.get('callFeeChargeQuickTipModalForH5');
                if (!localMark || localMark != dayMark) {
                    self.showQuickTipsModalMark = true;
                    return;
                }
                self.rechargeConfirm(true);
            },
            initChannelInfo: function () {
                var self = this,
                    channel = self.getQueryString('channel');
                if (channel === 'ujing') {
                    self.extraRule = '';
                }
                if (channel === 'xzlm') {
                    self.extraText = '';
                }
            },
            showSearchMobileOrderModal: function () {
                var self = this;
                self.showSearchMobileOrderModalMark = true;
            },
            searchOrder: function () {
                var self = this;

                if (!self.checkPhoneValid()) {
                    self.showToast("请输入正确手机号");
                    return;
                }
                if (!self.checkCodeValid()) {
                    self.showToast("验证码格式错误");
                    return;
                }
                self.getOrderList(true);
            },
            inputFocus: function () {
                var self = this;
                if (self.inputNumber.length < 11) {
                    self.showInputHintMark = true;
                } else {
                    self.showInputHintMark = false;
                }
                if (self.canFocusToClearInput) {
                    self.inputNumber = '';
                    self.canFocusToClearInput = false;
                    self.showInputHintMark = true;
                }
                self.$refs.input.focus();
            },
            inputHintItemClick: function (item) {
                var self = this;
                self.currentHintText = item.text;
                self.currentHintPhone = item;
                self.inputNumber = item.number;
            },
            initHintPhone: function () {
                var self = this;
                var phoneList = [];

                if (self.currentUserNumber) {
                    phoneList.push({
                        number: self.currentUserNumber,
                        text: '默认号码'
                    })
                }

                var localMobile = Cookies.get('callFeeChargeUserMobile');
                if (localMobile && localMobile != self.currentUserNumber) {
                    phoneList.push({
                        number: localMobile,
                        text: '上次充值'
                    })
                }

                if (phoneList.length > 0) {
                    self.hintPhoneList = phoneList;
                    self.currentHintPhone = phoneList[0];
                    self.inputNumber = self.currentHintPhone.number;
                    self.currentHintText = self.currentHintPhone.text;
                    self.canFocusToClearInput = true;
                }
            },
            toContact: function () {
                var self = this,
                    targetUrl = '../rules.html?channel=' + self.channel + '&uid=' + self.usertoken;
                if (self.hintPhoneList.length > 0) {
                    targetUrl += "&mobile=" + self.hintPhoneList[0].number;
                }
                location.href = targetUrl;
            },
            orderOne: function (price) {
                var self = this;
                var item = self.chooseList.filter(function (item) {
                    return item.price == price;
                })[0];
                self.showConfirmPayModal(item);
            },
            initCoupon: function () {
                var self = this;
                var arr = self.chooseList.filter(function (item) {
                    return (item.price === 30 || item.price === 50 || item.price === 100) && item.discountAmount > 0
                });
                var res = [];
                arr.forEach(function (item) {
                    var base = {
                        Title: '慢充话费券',
                        ViceTitle: '充值' + item.price + '元可用',
                        Amount: item.discountAmount,
                        PayAmount: item.discountAmount
                    }
                    res.push(base)
                })
                res.sort(function (a, b) {
                    return b.Amount - a.Amount;
                })
                self.normalCoupon = res;
                self.firstCoupon = res[0]
            },
            autoQueryOrderStatus: function () {
                var self = this;
                self.showConfirmGotModalMark = false;
                self.showDataLoading("正在检查支付结果");
                setTimeout(function () {
                    self.queryWxpay();
                }, 4000);
            },
            checkPhoneValid: function () {
                return /^1[3-9][0-9]\d{8}$/gi.test(this.phoneNum);
            },
            checkCodeValid: function () {
                return /\d{6}/gi.test(this.phoneCode);
            },
            getToken: function () {
                var self = this;

                // axios({
                //     method: 'post',
                //     url: "/ajax/TaoQuan/TaoQuan.ashx",
                //     params: {
                //         action: "getChannelToken",
                //         channel: self.channel,
                //         userId: self.getQueryString('userId'),
                //         appKey: self.getQueryString('appKey'),
                //         encryptedData: self.getQueryString('encryptedData'),
                //         payFinishUrl: self.getQueryString('payFinishUrl'),
                //         extra: self.getQueryString('extra'),
                //         timestamp: self.getQueryString('timestamp'),
                //         token: self.getQueryString('token'),
                //         pageType: self.getQueryString('pageType'),
                //         hideQuickTab: self.getQueryString('hideQuickTab'),
                //         mobile: self.getQueryString('mobile'),
                //         relationId: self.getQueryString('relationId')
                //     }
                // })
                //     .then(function (response) {
                //         var json = response.data;
                //         if (json.code == 0) {
                //             Cookies.set('callFeeH5Uid', json.data.token);
                //             localStorage.setItem('callFeeH5Uid', json.data.token);
                //             self.usertoken = json.data.token;
                //         } else {
                //             self.showToast(json.msg);
                //         }
                //     });
            },
            getCode: function () {
                var self = this;
                if (self.isWaitingForCode) {
                    return;
                }
                if (!self.checkPhoneValid()) {
                    self.showToast("请输入正确手机号");
                    return;
                }

                self.showDataLoading();
                // axios({
                //     method: 'post',
                //     url: "/ajax/TaoQuan/TaoQuan.ashx",
                //     params: {
                //         action: "getChannelSMSCode",
                //         mobile: self.phoneNum,
                //     }
                // })
                // .then(function (response) {
                //     self.hideDataLoading();
                //     var json = response.data;
                //     if (json.code == 0) {
                //         self.showToast("验证码已发送，请注意接收");
                //         self.isWaitingForCode = true;
                //         self.$refs.inputCode.focus();
                //         var codeInterval = setInterval(function () {
                //             if (self.remainSeconds == 1) {
                //                 self.remainSeconds = 60;
                //                 self.isWaitingForCode = false;
                //                 self.codeContent = "重新获取";
                //                 clearInterval(codeInterval);
                //             }
                //             self.remainSeconds--;
                //         }, 1000);
                //     } else {
                //         self.showToast(json.msg);
                //     }
                // });
            },
            bindMobile: function () {
                var self = this;
                if (!self.checkPhoneValid()) {
                    self.showToast("请输入正确手机号");
                    return;
                }
                if (!self.checkCodeValid()) {
                    self.showToast("验证码格式错误");
                    return;
                }
                self.showDataLoading();
                // axios({
                //     method: 'post',
                //     url: "/ajax/TaoQuan/TaoQuan.ashx",
                //     params: {
                //         action: "checkChannelSMSCode",
                //         mobile: self.phoneNum,
                //         code: self.phoneCode,
                //     }
                // })
                //     .then(function (response) {
                //         self.hideDataLoading();
                //         var json = response.data;
                //         if (json.code == 0) {
                //             self.showToast('绑定成功');
                //             // self.showBindMobileModalMark = false;
                //             // 保存用户信息到本地
                //
                //             Cookies.set('callFeeH5Uid', json.data.token);
                //             Cookies.set('callFeeH5Number', self.phoneNum);
                //             self.currentUserNumber = self.phoneNum;
                //             self.usertoken = json.data.token;
                //             self.initHintPhone();
                //         } else {
                //             self.showToast(json.msg);
                //         }
                //     });
            },
            toTipNext: function () {
                var self = this;

                var date = new Date();
                var dayMark = date.getMonth() + "" + date.getDate();
                Cookies.set('callFeeChargeTipModalForH5', dayMark, {expires: 1});
                self.showTipsModalMark = false;
                self.rechargeConfirm()
            },
            notRemindTip: function () {
                var self = this;
                var date = new Date();
                var dayMark = date.getMonth() + "" + date.getDate();
                Cookies.set('callFeeChargeTipModalForH5', dayMark, {expires: 7});
                self.showTipsModalMark = false;
            },
            toQuickTipNext: function () {
                var self = this;

                var date = new Date();
                var dayMark = date.getMonth() + "" + date.getDate();
                Cookies.set('callFeeChargeQuickTipModalForH5', dayMark, {expires: 1});
                self.showQuickTipsModalMark = false;
                self.rechargeConfirm(true);
            },
            notQuickRemindTip: function () {
                var self = this;
                var date = new Date();
                var dayMark = date.getMonth() + "" + date.getDate();
                Cookies.set('callFeeChargeQuickTipModalForH5', dayMark, {expires: 7});
                self.showQuickTipsModalMark = false;
            },
            chooseItem: function (item) {
                var self = this;

                if (item.isClose) {
                    return;
                }
                self.currentPayItem = item;
            },
            chooseQuickItem: function (item) {
                var self = this;

                self.currentPayItem = item;
            },
            showConfirmPayModal: function (item) {
                var self = this;
                if (!self.isPhoneNo(self.inputNumber.trim())) {
                    self.showToast("手机号格式不对");
                    return;
                }
                if (!self.areaText) {
                    return;
                }
                if (!self.checkAmountValidBySetting(item)) {
                    self.showToast("该面值维护中，请稍后再试。");
                    return;
                }
                if (!self.usertoken) {
                    //self.showBindMobileModalMark = true;
                    self.getToken();
                    console.log("usertoken_错误:"+self.usertoken)
                    //return;
                }
                if (self.showLoading) {
                    return;
                }

                if (item.stock_num == 0) {
                    self.showToast("库存不足");
                    return;
                }
                if (self.inputNumber.trim() == "") {
                    self.showToast("请输入手机号码");
                    return;
                }

                var checkMsg = self.checkMobileVirtualOrTrans();
                if (checkMsg) {
                    self.showToast(checkMsg);
                    return;
                }

                self.currentPayItem = item;
                self.agreeChargeMark = true;

                self.showTipsModalMark = true;

            },
            hasStr: function (a, b) {
                return a.indexOf(b) > -1
            },
            checkCanCharge: function () {
                var self = this;
                // 电信维护：广东、辽宁，三网其他地区正常收单
                if (self.hasStr(self.areaText, '电信')
                    && (self.hasStr(self.areaText, '广东')) && (self.hasStr(self.areaText, '辽宁'))) {
                    return false;
                } else {
                    return true;
                }
            },
            getOrderList: function (isSearch) {
                var self = this;
                self.showDataLoading();
                // axios({
                //     method: 'get',
                //     url: "/ajax/TaoQuan/TaoQuan.ashx",
                //     params: {
                //         action: "mobileChargeOrder",
                //         usertoken: self.usertoken,
                //         userId: self.getQueryString('userId'),
                //         channel: self.channel,
                //         platform: 'h5',
                //         category: 1,
                //         mobile: isSearch ? self.phoneNum : '',
                //         code: isSearch ? self.phoneCode : '',
                //     }
                // })
                //     .then(function (response) {
                //         self.hideDataLoading();
                //         var json = response.data;
                //         if (json.code === 0) {
                //             self.orderList = json.data;
                //             if (isSearch) {
                //                 self.showSearchMobileOrderModalMark = false;
                //                 self.showToast('查询成功')
                //             }
                //         } else {
                //             self.showToast(json.msg);
                //         }
                //     })
                //     .catch(function (error) {
                //
                //     });
            },
            getQuickChooseList: function (mark) {
                var self = this;
                self.showDataLoading();
                // axios({
                //     method: 'get',
                //     url: "/ajax/TaoQuan/TaoQuan.ashx",
                //     params: {
                //         action: "channelMobileChargeInfo",
                //         channel: self.channel,
                //         platform: 'h5',
                //         isFast: 1
                //     }
                // })
                //     .then(function (response) {
                //         if (!self.isNeedQueryLoading) {
                //             self.hideDataLoading();
                //         }
                //         var json = response.data;
                //         if (json.code === 0) {
                //             var arr = json.data.product;
                //             self.quickChooseList = arr;
                //             if (mark) {
                //                 self.currentPayItem = arr.find(function (item) {
                //                     return item.official_price === 100;
                //                 });
                //             }
                //
                //             arr.forEach(function (item) {
                //                 if (item.official_price == 100) {
                //                     self.quickNavPriceTag = Math.floor(item.sell_price) + '折快充';
                //                 }
                //             })
                //         } else {
                //             self.showToast(json.msg);
                //         }
                //     })
                //     .catch(function (error) {
                //
                //     });
            },
            //查询产品
            getProductList: function () {
                var self = this;
                self.showDataLoading();
                axios({
                    method: 'get',
                    url: "/mpayment/product/findAll",
                })
                    .then(function (response) {
                        if (!self.isNeedQueryLoading) {
                            self.hideDataLoading();
                        }
                        var json = response.data;
                        console.log(json)
                        if (json.code === "0") {
                            var arr = json.data;
                            self.chooseList = arr;
                            self.currentPayItem = arr[0];

                            arr.forEach(function (item) {
                                if (item.price == 100) {
                                    self.navPriceTag = Math.floor(item.discountAmount) + '折慢充';
                                }
                            })
                            self.initCoupon()
                        } else {
                            self.showToast(json.message);
                        }
                    })
                    .catch(function (error) {

                    });
            },
            rechargeConfirm: function (isQuick) {
                var self = this;

                if (!self.currentPayItem) {
                    return;
                }

                if (self.inputNumber.trim() == "") {
                    self.showToast("请输入手机号码");
                    return;
                }
                if (!self.isPhoneNo(self.inputNumber.trim())) {
                    self.showToast("手机号格式不对");
                    return;
                }

                if (!self.agreeChargeMark && !isQuick) {
                    self.showToast("请点击确认已阅读充值须知");
                    return;
                }
                //alipay  wechat
                console.log("提交订单：",self);
                axios({
                    method: 'post',
                    url: "/mpayment/sloworder/commitSlowOrder",
                    data: {
                        discountAmount: self.currentPayItem.discountAmount,
                        proId: self.currentPayItem.proId,
                        phone: self.inputNumber,
                        payType : "alipay"
                    }
                })
                .then(function (response) {
                    if (response.data.code === "0") {
                        if(response.data.data.payType == "wechat"){
                            window.open(response.data.data.h5PayUrl);
                        }else if(response.data.data.payType == "alipay"){
                            //去掉反斜杠
                            self.alipayPayHtml = response.data.data.h5PayUrl.replaceAll("\\","");

                            //去掉引号
                            //self.alipayPayHtml = self.alipayPayHtml.substring(1,self.alipayPayHtml.length - 1);
                            console.log("response",self.alipayPayHtml);
                            $("#alipayId").append(self.alipayPayHtml);
                            $("punchout_form").submit(function(e){
                                alert("Submitted");
                            });
                        }
                        //self.currentBatchNo = response.data.data.batch_no;

                        //self.rechargeSubmit();
                    } else {
                        self.showToast(response.data.message);
                    }
                });
            },
            rechargeSubmit: function () {
                var self = this;

                self.showDataLoading();
                // axios({
                //     method: 'post',
                //     url: "/ajax/TaoQuan/TaoQuan.ashx",
                //     params: {
                //         action: 'userPayChannelMobileCharge',
                //         batchNo: self.currentBatchNo,
                //         productNo: self.currentPayItem.id,
                //         rechargeNumber: self.inputNumber,
                //         usertoken: self.usertoken,
                //         channel: self.channel,
                //         userId: self.getQueryString('userId'),
                //         relationId: self.getQueryString('relationId'),
                //         platform: 'h5',
                //         extra: self.getQueryString('extra'),
                //         orderType: 1
                //     }
                // })
                //     .then(function (response) {
                //         self.hideDataLoading();
                //         var json = response.data;
                //         if (json.code == 0) {
                //             self.orderId = json.OrderNo;
                //             self.showPayConfirmModalMark = false;
                //
                //             var callBackUrl = ''
                //             var special = decodeURIComponent(self.getQueryString('payFinishUrl'));
                //             if (special) {
                //                 special = special.indexOf('?') > -1 ? special + '&' : special + '?';
                //                 callBackUrl = '/t/blackcard/callFee/blackUnique/payResult.html?reloadUrl=' + encodeURIComponent(special + 'orderId=' + json.OrderNo);
                //             } else {
                //                 alert('未传递payFinishUrl')
                //                 return;
                //             }
                //             location.href = (json.payParams.mweb_url + '&redirect_url=' + encodeURIComponent(self.domain + callBackUrl + '&orderId=' + json.OrderNo + '&batchNo=' + self.currentBatchNo))
                //             // self.showPayConfirmModalMark = false;
                //             // self.showDataLoading("正在检查支付结果");
                //         } else {
                //             self.showToast(response.data.msg);
                //         }
                //     });
            },
            //查询订单支付结果
            queryWxpay: function () {
                var self = this;
                axios({
                    method: 'post',
                    url: "/mpayment/sloworder/queryOrder",
                    data: {
                        oderId: self.orderId,
                    }
                })
                    .then(function (response) {
                        self.hideDataLoading();
                        var json = response.data;
                        self.isNeedQueryLoading = false;
                        if (json.code == "0") {
                            Cookies.set('callFeeChargeUserMobile', self.inputNumber);
                            self.showToast("支付成功");
                            Cookies.remove('callFeeChargeCouponForH5');
                        } else {
                            self.showToast(json.message);
                        }
                        var id = Cookies.get('callFeeForH5LocalOrderId');
                        id = id + ',' + self.orderId;
                        Cookies.set('callFeeForH5LocalOrderId', id);
                    });
            },
            showDataLoading: function (msg) {
                var self = this;
                self.loadingText = msg || "加载中";
                self.showLoading = true;
            },
            hideDataLoading: function () {
                var self = this;
                self.showLoading = false;
            },
            isPhoneNo: function (s) {
                return s && 11 == s.length ? /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[0-9]{1})|(18[0-9]{1})|(19[0-9]{1}))+\d{8})$/.test(s) : !1
            },
            clearInput: function () {
                var self = this;
                self.inputNumber = "";
                self.showInputClose = false;
                self.inputFocus();
            },
            showToast: function (msg) {
                layer.open({
                    content: msg,
                    skin: 'msg',
                    time: 2
                });
            },
            //获取get参数
            getQueryString: function (name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) {
                    var match = r[2];
                    if (match.indexOf('?') > -1) {
                        match = match.split('?')[0];
                    }
                    return decodeURIComponent(match);
                }
                return '';
            }
        }
    });
</script>


</body>
</html>